<template>
    <div class="container">
        <div class="job-container">
            <!-- 输入框 -->
            <div class="textarea" :class="{shrink: !jobImgList.length && audioData.content}">
                <textarea placeholder-class="phcolor" maxlength="100" placeholder="说说今天的感想和收获吧..." v-model="jobContent.content"></textarea>
                <div class="job-images">
                    <ul>
                        <li v-for="(item,index) in jobImgList" :key="index" :style="{'background-image':'url('+item.content+')'}" @click="showImage(item)">
                            <img src="http://mobuz-mp.gz.bcebos.com/matter/close.png" @click="deleteImage(index)">
                        </li>
                        <div class="upload-img-btn" v-if="jobImgList.length && jobImgList.length < 4" @click="uploadImags()">
                            <!-- <img src="http://mobuz-mp.gz.bcebos.com/matter/add_photos_icon.png"> -->
                        </div>
                    </ul>
                </div>
            </div>
            <!-- 媒体文件 -->
            <div class="media">
                <!-- <div class="record-controller" v-if="recordType"> -->
                    <!-- 音频播放器 -->
                    <!-- <mAudio :audioData="audioData" @audioeNotice="audioeNotice" :close="closeFlag" @closeAudioWatch="closeAudioWatch" v-if="recordType === 5" /> -->
                    <!-- 音频录音器 -->
                    <!-- <div class="controller" v-if="recordType && recordType != 5"> -->
                        <!-- 关闭录音按钮 -->
                        <!-- <div class="record-close">
                            <span class="close-icon" @click="closeAudio()"></span>
                        </div> -->
                        <!-- 录音时长 -->
                        <!-- <div class="record-duration">
                            <div class="dot" :class="{pause: authorizeRecord}"></div>
                            <div class="duration">{{notime}}</div>
                        </div> -->
                        <!-- 录音控制按钮 -->
                        <!-- <div class="controller-btn"> -->
                            <!-- 暂停播放 -->
                            <!-- <img src="http://mobuz-mp.gz.bcebos.com/matter/end_of_the_recording_icon.png" v-if="!authorizeRecord" @click="resumeRecorder()"> -->
                            <!-- 播放中 -->
                            <!-- <img src="http://mobuz-mp.gz.bcebos.com/matter/recording_in_progress_icon.png" v-if="authorizeRecord" @click="pauseRecorder()">
                        </div>
                        <div class="finish" @click.stop="stopRecorder()">
                            <span >完成</span>
                        </div>
                    </div> -->
                    <!-- 音频播放器关闭按钮 -->
                    <!-- <span class="close-btn" v-if="recordType === 5" @click="closeAudio()"></span>
                </div> -->
                <!-- 视频播放器 -->
                <div class="video-controller" v-if="jobVideo.url">
                    <video :src="jobVideo.url" id="myVideo"></video>
                    <span @click="closeViode()">删除</span>
                </div>
                <!-- 上传媒体文件的按钮 -->
                <div class="upload-btn">
                    <!-- <div v-if="!jobImgList.length" @click="uploadImags()">
                        <div class="camera">
                            <img src="http://mobuz-mp.gz.bcebos.com/matter/camera_icon.png">
                        </div>
                    </div>-->
                    <!-- <div v-if="!recordType && !jobVideo.url">
                        <button open-type="openSetting" v-if="!recordFlag" @opensetting="opensettingRecord"></button>
                        <div class="record" @click="recordFlag ? authorize() : ''">
                            <img src="http://mobuz-mp.gz.bcebos.com/matter/record_icon.png">
                        </div>
                    </div>  -->
                    <div v-if="!recordType && !jobVideo.url">
                        <div class="video" @click="uploadVideo()">
                            <img src="http://mobuz-mp.gz.bcebos.com/matter/video_icon.png">
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="location" @click="locationFlag ? openLocation() : ''">
                <button open-type="openSetting" v-if="!locationFlag" @opensetting="opensettingLocation"></button>
                <div class="location-icon">
                    <div class="icon"></div>
                </div>
                <div class="location-msg">{{location.address}}</div>
                <div class="location-right-icon">
                    <img src="http://mobuz-mp.gz.bcebos.com/matter/right_job_icon.png">
                </div>
            </div> -->
        </div>
        <!-- 底部 -->
        <div class="job-footer">
            <div class="job-cancel" @click="backRouter()">取消</div>
            <div class="submit-job" @click="submitRemind()">发表作业</div>
        </div>

    </div>
</template>

<script>
import {
    showMessager,
    showPictureCard,
    obtainLocationFlag,
    obtainLocationData,
    accreditFlag
} from "@/config/wUtils";
import { baseUrl } from "@/config/env";
import { addStudentJob } from "@/config/api";
// import mAudio from "../../../src/components/audio";
import { uploadMultimedia, uploadMultimediaKey } from "@/config/mUtils";
import { baiduCloud } from "@/config/env";
import {NEWMODULEBATCHID} from '@/config/env'
export default {
    components: {
        // mAudio
    },
    created() {},

    data() {
        return {
            // 监听是否要关闭音频播放器
            closeFlag: false,
            // 位置 是否授权过
            locationFlag: false,
            // 录音
            recordFlag: false,
            // 课程ID
            section_id: "",
            // 学员微信信息
            userInfo: {},
            // 学员ID
            student_id: "",
            // 作业文本内容
            jobContent: {
                status: 0,
                content: ""
            },
            // 音频播放器
            audioData: {
                job: true,
                status: 2
            },
            // 图片列表
            jobImgList: [],
            // 视频
            jobVideo: {
                status: 10,
                play: 0,
                content: "",
                url: ""
            },
            // 录音组件
            recorderManager: null,
            // 是否授权录音
            authorizeRecord: false,
            // 0不录音 1 开始录音 2 暂停录音 3 继续录音 4 停止录音 5 录音完毕
            recordType: 0,
            // 录音的时长
            recordDuration: 0,
            // 录音定时器
            recordTimer: null,
            // 坐标
            location: {
                address: "所在位置"
            },
            query: null,
            // 视频播放器
            videoContext: null
            //  // 本地存储学员的批次ID
            //     wx.setStorageSync('batch_id',res.data.batch_id)
            //     // 学员ID
            //      wx.setStorageSync('student_id', res.data.student_id)
        };
    },
    watch: {
        // audioData() {
        //     console.log("监听音频数据", this.audioData);
        // }
    },
    computed: {
        // notime() {
        //     return this.formact(this.recordDuration);
        // }
    },
    onShow () {
        // 开始手机常亮状态
        // wx.setKeepScreenOn({
        //     keepScreenOn: true
        // })
    },
    mounted() {
        // this.query = wx.createSelectorQuery();
        this.userInfo = wx.getStorageSync("userInfo");
        this.student_id = wx.getStorageSync("student_id");
        this.section_id = this.$root.$mp.query.section_id;
        // this.obtainLocation()
        // wx.chooseLocation()
        // this.defaultAccredit();
        // this.recorderInit()
    },
    onUnload() {
        // 关闭手机常亮
        // wx.setKeepScreenOn({
        //     keepScreenOn: false
        // })
        // // 退出当前界面关闭录音
        // if (this.audioData.play) {
        //     this.audioData.play = 0;
        //     return false;
        // }
        // if (this.recordType) {
        //     this.closeAudio()
        //     // this.recorderManager = null;
        //     return false
        // }
        // if (this.recordType && this.recordType != 5) {
        //     // this.pauseRecorder()
        //     this.stopRecorder(1)
        // }
    },
    onHide() {
        // 关闭手机常亮
        wx.setKeepScreenOn({
            keepScreenOn: false
        })
        // // 退出当前界面关闭录音
        // if (this.audioData.play) {
        //     this.audioData.play = 0;
        //     return false;
        // }
        // if (this.recordType && this.recordType != 5) {
            // this.pauseRecorder()
        //     this.stopRecorder(1)
        // };
    },
    methods: {
        // 默认弹出授权
        async defaultAccredit() {
            // 位置授权
            let L_flag = await accreditFlag("scope.userLocation");
            if (L_flag) {
                this.locationFlag = true;
            } else {
                this.locationFlag = false;
            }
            // 录音授权
            let A_flag = await accreditFlag("scope.record");
            if (A_flag) {
                this.recordFlag = true;
            } else {
                this.recordFlag = false;
            }
        },
        // 后退
        backRouter() {
            wx.navigateBack({
                delta: 1
            });
        },
        // 时间格式化
        formact(current) {
            let interval = current | 0;
            let minute = (interval / 60) | 0;
            let num = interval % 60;
            let len = num.toString().length;
            while (len < 2) {
                num = "0" + num;
                len++;
            }
            if (minute.toString().length < 2) {
                minute = "0" + minute;
            }
            return minute + ":" + num;
        },
        // 关闭已经上传的视频
        closeViode() {
            this.jobVideo = {
                status: 10,
                play: 0,
                content: "",
                url: ""
            };
        },

        // 上传视频
        async uploadVideo() {
            // if (this.audioData.content) {
            //     showMessager("只能上传音频或者视频");
            //     return false;
            // }
            let self = this;
            wx.chooseVideo({
                sourceType: ["album", "camera"],
                maxDuration: 60,
                camera: "back",
                success: async res => {
                    console.log(res);
                    let { tempFilePath, thumbTempFilePath, size } = res;
                    let fileSize = size / 1024 / 1000;
                    if (fileSize >= 20) {
                        showMessager("视频过长，请重新上传");
                        return false;
                    }
                    console.log(tempFilePath, "视频");
                    console.log(thumbTempFilePath, "视频截图");

                    this.jobVideo.url = tempFilePath;
                    this.$nextTick(() => {
                        this.videoContext = wx.createVideoContext("myVideo");
                    });
                    // this.thumbTempFilePath = thumbTempFilePath;
                    // 上传视频到后台，让后台上传到百度云

                    // await uploadMultimedia(tempFilePath,"operation/video/" ,'视频处理中')
                    //     .then(data => {
                    //         console.log(data,'百度云视频上传')
                    //         this.jobVideo.url = data;
                    //         this.$nextTick(() => {
                    //             this.videoContext = wx.createVideoContext(
                    //                 "myVideo"
                    //             );
                    //         });
                    //     })
                    //     .catch( err => {
                    //         showMessager('上传视频失败，请稍后再试');
                    //         return false;
                    //     })

                    // await this.upload("videoImage", tempFilePath, "视频处理中")
                    //     .then(data => {
                    //             console.log("后台视频上传", data);
                    //             // this.jobVideo.url = data.video;
                    //             this.jobVideo.content = data;
                    //             // this.$nextTick(() => {
                    //             //     this.videoContext = wx.createVideoContext(
                    //             //         "myVideo"
                    //             //     );
                    //             // });
                    //         }
                    //     )
                    //     .catch( err => {
                    //         showMessager('上传视频失败，请稍后再试');
                    //     })
                }
            });
        },
        // 录音 校验授权
        authorize() {
            if (this.jobVideo.url) {
                showMessager("只能上传音频或者视频");
                return false;
            }
            let self = this;
            this.startRecorder();
            // this.recordInter('stop');
            // this.recordDuration = 0;
            // this.recorderInit();
        },
        // 打开位置权限
        opensettingLocation(e) {
            console.log(e);
            if (!e.target.authSetting["scope.userLocation"]) {
                this.locationFlag = false;
            } else {
                this.locationFlag = true;
                // this.gotoObtainLocationData()
            }
        },
        // 获取位置是否授权过
        // async obtainLocation () {
        //    let flag =  await obtainLocationFlag('scope.userLocation')
        //     console.log('位置授权',flag)
        //    if (flag) {
        //         this.locationFlag = true;
        //    } else {
        //         this.locationFlag = false;
        //        this.openLocation()
        //    }
        // },
        // 获取位置数据
        async gotoObtainLocationData() {
            let data = await obtainLocationData();
            console.log("位置数据", data);
            this.location.address = data.address;
            this.location.latitude = data.latitude;
            this.location.longitude = data.longitude;
            this.location.name = data.name;
            this.locationFlag = true;
        },
        // 打开地图定位
        async openLocation() {
            let self = this;
            let flag = await accreditFlag("scope.userLocation");
            if (flag) {
                this.locationFlag = true;
                this.gotoObtainLocationData();
            } else {
                this.locationFlag = false;
            }
        },
        // 打开图片上传
        uploadImags() {
            if (this.jobImgList.length >= 5) {
                // 超过5张不上传
                return false;
            }
            wx.chooseImage({
                count: 5 - this.jobImgList.length,
                success: async res => {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    console.log(res);
                    for (let i = 0; i < res.tempFilePaths.length; i++) {
                        await uploadMultimedia(
                            res.tempFilePaths[i],
                            "operation/image/",
                            "图片处理中"
                        ).then(data => {
                            this.jobImgList.push({ status: 11, content: data });
                        });
                    }
                }
            });
        },
        // 打开图片预览
        showImage(item) {
            let imageList = [];
            this.jobImgList.forEach((itemCell, index) => {
                console.log(itemCell, "......展示图片列表");
                if (itemCell.status === 11) {
                    imageList.push(itemCell.content);
                }
            });
            showPictureCard(item.content, imageList);
        },
        // 删除图片
        deleteImage(index) {
            console.log(index);
            this.jobImgList.splice(index, 1);
        },
        // 打开录音授权设置
        opensettingRecord(e) {
            console.log(e, "录音");
            if (!e.target.authSetting["scope.record"]) {
                this.recordFlag = false;
            } else {
                this.recordFlag = true;
            }
        },
        // 音频播放器子组件触发
        audioeNotice(data) {
            console.log(this.audioData, "音频");
            console.log("音频播放器子组件触发", data);
            if (this.audioData.play) {
                // data.play = 0;
                // data.play =  0;
                this.audioData.play = 0;
            } else {
                this.audioData.play = 1;
            }
        },
        // 录音的定时器
        recordInter(type) {
            if (type === "start") {
                this.authorizeRecord = true;
                // if (!this.recordDuration) {
                //     this.recordDuration = 1;
                // }
                clearInterval(this.recordTimer);
                // 开始定时
                this.recordTimer = setInterval(() => {
                    this.recordDuration++;
                }, 1000);
            }
            if (type === "stop") {
                this.authorizeRecord = false;
                if (this.recordTimer != null) {
                    // 暂停定时
                    clearInterval(this.recordTimer);
                }
            }
        },
        // 录音功能初始化
        async recorderInit() {
            let self = this;
            if (this.recorderManager != null) {
                if (this.recordType && this.recordType != 5 ) {
                    this.recorderManager.stop();
                }
                this.recordType = 0;
                // this.recorderManager = null;
            }
            this.recorderManager = await wx.getRecorderManager();
            // 录音中
            this.recorderManager.onStart(res => {
                // console.log("recorder start");
                // // this.recordDuration = 0;
                // this.recordInter("stop");
                this.recordInter("start");
                this.authorizeRecord = true;
            });
            // 暂停录音
            this.recorderManager.onPause(() => {
                console.log("recorder pause");
                this.recordInter("stop");
                this.authorizeRecord = false;
            });
            // 停止录音
            this.recorderManager.onStop(async res => {
                console.log("recorder stop", res, self.recordType);
                if (self.recordType > 0) {
                    const { tempFilePath, duration, fileSize } = res;
                    self.authorizeRecord = false;
                    // self.recordDuration = parseInt(Math.ceil(duration / 1000));
                    self.recordInter("stop");
                    self.recordType = 5;
                    console.log("音频秒", self.recordDuration);
                    // showMessager('音频上传中')
                    self.audioData = {
                        status: 2,
                        play: 0,
                        content: tempFilePath,
                        duration: self.recordDuration
                    };
                    wx.hideLoading()
                    console.log("音频上传", self.audioData);
                }
            });
            // 已录制完指定帧大小的文件
            this.recorderManager.onFrameRecorded(res => {
                const { frameBuffer } = res;
                console.log("frameBuffer.byteLength");
            });
            // 录音报错
            this.recorderManager.onError(res => {
                console.log(res,'录音报错')
                if (res.errCode && this.recordType && this.recordType != 5) {
                    this.recordInter("stop");
                    wx.showModal({
                        title: "出错啦",
                        content: "录音崩溃啦，请重新录音，非常抱歉",
                        showCancel: !0,
                        success: function(e) {
                            self.closeAudio()
                        }
                    });
                }
                // this.recorderManager.stop()
                // if (this.recordType != 5) {
                //     wx.showModal({
                //         title: "出错啦",
                //         content: "录音崩溃啦，请重新录音，非常抱歉",
                //         showCancel: !0,
                //         success: function(e) {
                //             self.closeAudio()
                //         }
                //     });
                // }
            });
        },
        // 告诉音频播放器要关闭他
        closeAudio() {
            this.closeFlag = true;
            // 关闭停止录音
            if (this.recorderManager != null && this.recordType && this.recordType != 5 ) {
                this.recordType = 0;
                this.recordInter('stop');
                this.recorderManager.stop();
                this.audioData.content = '';
                this.audioData.url = '';
            }
            if (!this.audioData.play) {
                this.recordType = 0;
                this.audioData.content = '';
                this.audioData.url = '';
            }
           this.audioData.play = 0;
            setTimeout(() => {
                this.recordType = 0;
                this.audioData.content = '';
                this.audioData.url = '';
            }, 500);
        },
        // 获取音频的播放指令后。关闭播放器
        closeAudioWatch(flag) {
            console.log("父组件监听暂停", flag);
            if (flag) {
                this.audioData = {
                    play: 0,
                    content: "",
                    duration: "",
                    url: ""
                };
                this.recordType = 0;
                this.closeFlag = false;
                this.recordInter("stop");
                this.recorderManager.stop();
            }
        },
        // 开始录音 操作
        async startRecorder() {
            // this.recordInter('stop');
            if (this.recorderManager  == null) {
                await this.recorderInit()
            }
            let self = this;
            this.recordInter("stop");
            this.recordDuration = 0;
            if (this.recorderManager != null) {
                if (this.recordType && this.recordType != 5 ) {
                    this.recorderManager.stop();
                }
                this.recordType = 0;
                // this.recorderManager = null;
            }
            // else {
            //     this.recorderManager = await wx.getRecorderManager();
            // }

            // this.recordType = 6;
            // 开始录音
            const options = {
                duration: 400000, // 录制四分钟
                sampleRate: 44100,
                numberOfChannels: 1,
                encodeBitRate: 192000,
                format: "mp3",
                frameSize: 50
            };
            await this.recorderManager.start(options);
            this.recordType = 1;
            // this.startRecorder();
            console.log("开始录音");
            this.recordDuration = 1;
            this.recordInter('start')
        },
        // 暂停录音
        pauseRecorder() {
            console.log("暂停播放");
            this.recordType = 2;
            this.recorderManager.pause();
            this.recordInter("stop");
        },
        // 继续录音
        resumeRecorder() {
            // if (this.recordType === 6) {

            //     return false;
            // }
            console.log("继续播放");
            this.recorderManager.resume();
            this.recordType = 3;
            this.recordInter("start");
            this.authorizeRecord = true;
        },
        // 停止录音
        stopRecorder(str) {
            let self = this;
            console.log("停止播放");
            this.recordInter("stop");
            if (this.recorderManager != null) {
                if (this.recordDuration) {
                    console.log('触发停止')
                    this.recordType = 4;
                    this.recorderManager.stop();
                    // 微信没触发stop，让用户重新录音
                    // if (str === 1) return false;
                    // wx.showLoading({
                    //     title: "处理录音中",
                    // });
                    // setTimeout(()=> {
                    //     if (self.audioData.duration && this.recordType && this.recordType != 5) {
                    //         wx.hideLoading()
                    //         wx.showModal({
                    //             title: "出错啦",
                    //             content: "录音崩溃啦，请重新录音，非常抱歉",
                    //             showCancel: !0,
                    //             success: function(e) {
                    //                 self.closeAudio()
                    //             }
                    //         });
                    //     }
                    // },6000)
                } else {
                    this.recordType = 0;
                }
            } else {
                this.recordType = 0;
            }
        },
        // 录音完毕
        endRecorder() {
            this.recordType = 5;
        },
        // 上传附件到服务器
        upload(type, filePath, message, key) {
            return new Promise((resolve, reject) => {
                wx.showLoading({
                    title: message ? message : "上传中..."
                });
                wx.uploadFile({
                    url: baseUrl + "/weapp/upload/" + type,
                    filePath: filePath,
                    name: "file",
                    formData: {
                        key
                    },
                    success: res => {
                        wx.hideLoading();
                        if (res.data) {
                            let data = JSON.parse(res.data);
                            console.log(data.data.data, "...........永久音频");
                            // self.thumbTempFilePath = data.data.data;
                            resolve(data.data.data);
                        } else {
                            reject("上传失败");
                        }
                    },
                    fail: err => {
                        wx.hideLoading();
                        reject(err);
                    }
                });
            });
        },
        // 提交提醒
        submitRemind () {
            let self = this;
            
            if (self.audioData.content || self.jobVideo.url) {
                wx.showModal({
                    content: '是否提交作业？提交后无法修改',
                    success: function (res) {
                        if (res.confirm) {
                            self.submitJob()
                        }
                    }
                })
            } else {
                showMessager("必须上传音频或者视频");
                wx.hideLoading();
            }
            
        },
        // 提交作业
        async submitJob() {
            let self = this;
            if (!self.student_id || !self.userInfo.openId) {
                showMessager("登录过期！请用户删除小程序，重新授权登录");
                return false;
            }
            if (self.jobVideo.url) {
                await uploadMultimediaKey(self.jobVideo.url).then(
                    async key => {
                        // 考虑到服务器压力，目前将视频截图取消掉
                        // await self
                        //     .upload(
                        //         "videoImage",
                        //         self.jobVideo.url,
                        //         "视频上传中",
                        //         key.key
                        //     )
                        //     .then(res => {
                        //         console.log(res, "图片");
                        //         self.jobVideo.content = res;
                        //     })
                        //     .catch(err => {
                        //         showMessager("上传视频失败，请稍后再试");
                        //     });
                        // 已经上传过百度云的，不重复上传
                        if (self.jobVideo.url.indexOf("mobuz-bs") == -1) {
                            await uploadMultimedia(
                                self.jobVideo.url,
                                "operation/video/",
                                "视频上传中",
                                key.fileKey
                            )
                                .then(res => {
                                    console.log(res, "百度云视频上传");
                                    self.jobVideo.url = res;
                                    // self.jobVideo.content = baiduCloud.urlBos+'/operation/image/'+ key.key+'.jpg';
                                })
                                .catch(err => {
                                    showMessager(
                                        "上传视频失败，请稍后再试"
                                    );
                                });
                        }
                    }
                );

                console.log( self.jobVideo,'视频文件上传')
            }
            if (self.audioData.content && (self.jobVideo.content.indexOf("mobuz-bs") == -1) ) {
                self.audioData.play = 0;
                await uploadMultimedia(
                    self.audioData.content,
                    "operation/audio/",
                    "录音上传中"
                ).then(res => {
                    console.log(res, "路由地址");
                    self.audioData.content = res;
                });
            }
            let location =
                self.location.address != "所在位置"
                    ? JSON.stringify(self.location)
                    : "";
            let data = {
                content: []
            };
            if (self.audioData.content) {
                data.content.push(self.audioData);
            }
            if (self.jobContent.content) {
                data.content.push(self.jobContent);
            }
            if (self.jobImgList.length || self.jobVideo.url) {
                let content = [];
                if (self.jobVideo.url) {
                    content.push(self.jobVideo);
                }
                content = [...content, ...self.jobImgList];
                data.content.push({
                    status: 1,
                    state: !self.jobImgList.length ? 1 : 0,
                    content: content
                });
            }
            console.log("提交作业", location);
                wx.showLoading({
                title: '作业提交中'
            });
            await addStudentJob(
                self.student_id,
                self.userInfo.openId,
                JSON.stringify(data.content),
                self.section_id,
                location,
                self.userInfo.unionId
            )
                .then(res => {
                    console.log(res, "作业提交");
                    if (res.status === 200) {
                        self.recordType = 0;
                        self.authorizeRecord = false;
                        self.jobContent = {
                            status: 0,
                            content: ""
                        };
                        self.audioData = {
                            status: 2,
                            play: 0,
                            content: "",
                            duration: 0
                        };
                        // 图片列表
                        self.jobImgList = [];
                        // 视频
                        self.jobVideo = {
                            status: 10,
                            play: 0,
                            content: "",
                            url: ""
                        };
                        self.location = {
                            address: "所在位置"
                        };
                        showMessager("提交完成");
                        // 跳转作业详情
                        // wx.redirectTo({ url: "../taskParticulars/main?task_state=1&job_id="+res.data });
                        // 加快触发 JavaScriptCore 垃圾回收（Garbage Collection）
                        let batch_id =  wx.getStorageSync('batch_id')
                        if (batch_id <= NEWMODULEBATCHID) {
                            wx.navigateTo({
                                url: '../taskParticulars/main?task_state=1&job_id='+res.data
                            })
                        } else {
                            wx.navigateTo({
                                url: '../taskCircumstance/main?job_id='+res.data+'&status=1'
                            })  
                        }
                    } else {
                        showMessager("网络拥堵，请稍候再试");
                    }
                    wx.hideLoading();
                })
                .catch(err => {});
            
        }
    }
};
</script>

<style lang="less" scoped>
@keyframes recordDot {
    0% {
        background-color: rgba(238, 58, 41, 0);
    }
    50% {
        background-color: rgba(238, 58, 41, 0.5);
    }
    100% {
        background-color: rgba(238, 58, 41, 1);
    }
}

.container {
    position: relative;
    padding: 0 45rpx 100rpx;
    border-top: 1rpx solid #eaeaea;
    .job-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 98rpx;
        font-size: 0;
        > div {
            line-height: 98rpx;
            height: 100%;
            display: inline-block;
            font-family: PingFangSC-Regular;
            font-size: 36rpx;
            color: #ffffff;
            letter-spacing: 2rpx;
            text-align: center;
            &.job-cancel {
                width: 32%;
                background: #bdbdbd;
            }
            &.submit-job {
                width: 68%;
                background-image: linear-gradient(
                    -90deg,
                    #ffb497 0%,
                    #fe7a72 100%
                );
            }
        }
    }
    .textarea {
        height: 560rpx;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #eaeaea;
        position: relative;
        textarea {
            width: 100%;
            height: 360rpx;
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            letter-spacing: 0.61rpx;
        }
        .phcolor {
            color: #999999;
        }
        &.shrink {
            height: 391rpx;
        }
        .job-images {
            position: absolute;
            bottom: 30rpx;
            z-index: 99999;
            ul {
                font-size: 0;
                li,
                div {
                    display: inline-block;
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 8rpx;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                    margin-right: 20rpx;
                    position: relative;
                }
                li {
                    position: relative;
                    img {
                        display: block;
                        position: absolute;
                        top: 5rpx;
                        right: 5rpx;
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                div {
                    margin-right: 0;
                    box-sizing: border-box;
                    border: 1rpx solid #eaeaea;
                    background-image: url("http://mobuz-mp.gz.bcebos.com/matter/add_photos_icon.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 60rpx 60rpx;
                }
            }
        }
    }
    .media {
        padding: 24rpx 0 30rpx;
        // border-bottom: 1rpx solid #eaeaea;
        .video-controller {
            padding-bottom: 30rpx;
            display: block;
            // width: 300rpx;
            height: 200rpx;
            position: relative;
            display: flex;
            align-items: center;
            video {
                // display: block;
                display: inline-block;
                width: 300rpx;
                height: 100%;
            }
            span {
                margin-left: 50rpx;
                display: inline-block;
                width: 90rpx;
                height: 50rpx;
                line-height: 50rpx;
                text-align: center;
                border: 1px solid #EE3A29;
                border-radius: 5rpx;
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #EE3A29;
                letter-spacing: 0;
                // position: absolute;
                // right: -15rpx;
                // top: -15rpx;
                // width: 30rpx;
                // height: 30rpx;
                // background-image: url("http://mobuz-mp.gz.bcebos.com/matter/close.png");
                // background-repeat: no-repeat;
                // background-position: center center;
                // background-size: cover;
                z-index: 9;
            }
        }
        .record-controller {
            padding-bottom: 30rpx;
            position: relative;
            .controller {
                padding-right: 29rpx;
                height: 120rpx;
                background: #fdfdfd;
                border: 1rpx solid #e2e2e2;
                border-radius: 8rpx;
                display: flex;
                align-items: center;
                .record-close {
                    padding-left: 30rpx;
                    height: 35rpx;
                    flex-basis: 80rpx;
                    display: flex;
                    align-items: center;
                    border-right: 2rpx solid #cccccc;
                    .close-icon {
                        display: block;
                        width: 25.5rpx;
                        height: 25.5rpx;
                        background-image: url("http://mobuz-mp.gz.bcebos.com/matter/delete_record_icon.png");
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                    }
                }
                .record-duration {
                    width: 100%;
                    font-size: 0;
                    display: flex;
                    align-items: center;
                    > div {
                        display: inline-block;
                        &.dot {
                            margin: 0 10rpx 0 22rpx;
                            width: 14rpx;
                            height: 14rpx;
                            border-radius: 50%;
                            background-color: rgba(238, 58, 41, 1);
                        }
                        &.pause {
                            animation: recordDot 2s infinite;
                        }
                        &.duration {
                            font-family: PingFangSC-Regular;
                            font-size: 24rpx;
                            color: #666666;
                            letter-spacing: 0.66rpx;
                        }
                    }
                }
                .controller-btn {
                    margin-right: 18rpx;
                    // display: inline-block;
                    flex-basis: 98rpx;
                    img {
                        display: block;
                        width: 80rpx;
                        height: 80rpx;
                    }
                }
                .finish {
                    padding: 25rpx 0;
                    // padding-right: 29rpx;
                    // margin: 0 29rpx 0 18rpx;
                    flex-basis: 80rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                    z-index: 999;
                    span {
                        display: block;
                        font-family: PingFangSC-Regular;
                        font-size: 24rpx;
                        color: #333333;
                        letter-spacing: 0.66rpx;
                    }
                }
            }
            .close-btn {
                display: block;
                position: absolute;
                right: -13rpx;
                top: -13rpx;
                width: 30rpx;
                height: 30rpx;
                background-image: url("http://mobuz-mp.gz.bcebos.com/matter/close.png");
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
            }
        }
        .upload-btn {
            font-size: 0;
            > div {
                display: inline-block;
                width: 140rpx;
                height: 140rpx;
                border: 1rpx solid #dbdbdb;
                border-radius: 8rpx;
                margin-right: 20rpx;
                position: relative;
                button {
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                    &::after {
                        border: none;
                    }
                }
                div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    img {
                        display: block;
                        margin: 0 auto;
                    }
                    &.camera {
                        img {
                            width: 70rpx;
                            height: 58rpx;
                        }
                    }
                    &.record {
                        img {
                            width: 32rpx;
                            height: 60rpx;
                        }
                    }
                    &.video {
                        img {
                            width: 60rpx;
                            height: 60rpx;
                        }
                    }
                }
            }
        }
    }
    .location {
        height: 80rpx;
        display: flex;
        align-items: center;
        position: relative;
        button {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            &::after {
                border: none;
            }
        }
        .location-icon {
            flex-basis: 80rpx;
            .icon {
                padding-left: 20rpx;
                display: block;
                width: 40rpx;
                height: 40rpx;
                background-image: url("http://mobuz-mp.gz.bcebos.com/matter/location_icon.png");
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 33rpx 39rpx;
            }
        }
        .location-msg {
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 28rpx;
            color: #333333;
            letter-spacing: 0.57rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .location-right-icon {
            flex-basis: 23rpx;
            text-align: left;
            img {
                display: block;
                width: 13rpx;
                height: 24rpx;
            }
        }
    }
}
</style>
